<template>
    <view class="normal-login-container">
        <view class="logo-content align-center justify-center flex">
            <text class="title">中运通注册</text>
        </view>
        <view class="login-form-content">

            <up-form :model="registerForm" :rules="rules" label-width="90px" ref="formRef">
                <view class="form_part">
                    <up-form-item prop="username">
                        <up-input type="number" prefixIcon="account" style="height: 46px;" shape="circle" clearable
                            placeholder="请输入登录账号" v-model="registerForm.username"></up-input>
                    </up-form-item>
                    <up-form-item prop="password">
                        <up-input prefixIcon="lock" style="height: 46px;" shape="circle" clearable placeholder="请输入密码"
                            v-model="registerForm.password" password></up-input>
                    </up-form-item>
                    <up-form-item prop="confirmPassword">
                        <up-input prefixIcon="lock" style="height: 46px;" shape="circle" clearable placeholder="请重复输入密码"
                            v-model="registerForm.confirmPassword" password></up-input>
                    </up-form-item>
                    <up-form-item prop="code">
                        <up-code-input :style="{ width: windowWidth > 375 ? '75%' : '60%' }" mode='bottomLine'
                            class="myCode" v-model="registerForm.code" :space="5"></up-code-input>
                        <div style="width: 80px;margin-left: 10px;">
                            <up-code ref="uCode" @change="codeChange"></up-code>
                            <up-button style="height: 35px;" type="primary" @tap="getCode"><span
                                    style="font-size: 10px;">{{ tips }}</span></up-button>
                        </div>
                    </up-form-item>
                    <up-form-item prop="roleCode">
                        <up-radio-group v-model="registerForm.roleCode" placement="row"
                            style="display: flex;justify-content: space-around;">
                            <up-radio shape="circle" label="司机" name="driver"></up-radio>
                            <up-radio shape="circle" label="船长" name="captain"></up-radio>
                        </up-radio-group>
                    </up-form-item>
                </view>
            </up-form>
            <view class="action-btn">
                <button @click="handleRegister" class="register-btn cu-btn block bg-blue lg round">注册</button>
            </view>
        </view>
        <view class="xieyi text-center">
            <text @click="goLogin" class="text-blue">使用已有账号登录</text>
        </view>
        <view class="xieyi text-center check" style="margin: 20px 0 0 0;">
            <div style="display: flex;flex-wrap: wrap;align-items: center;"
                :style="{ padding: windowWidth > 375 ? '0 10%' : '0 5%' }">
                <up-checkbox name="agree" usedAlone v-model:checked="isAgree">
                </up-checkbox>
                <view>
                    <text class="text-grey1" @click="() => isAgree = !isAgree">我已阅读并同意</text>
                    <text class="text-blue" @click="privacyAgreement">《隐私协议》</text>
                    <text class="text-grey1">和</text>
                </view>
                <view style="margin-left: 20px;">
                    <text class="text-blue" @click="serviceAgreement">《平安结算通商户服务协议》</text>
                </view>
            </div>
        </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import {
    ref,
    reactive
} from "vue"
import {
    getCodeStr,
    register,
    verificationCodeStr
} from '@/api/login'
import {
    encrypt
} from "@/utils/encryption"
import {
    useUserStore
} from "@/store/modules/user"



/* hooks */
const store = useUserStore()


/* 数据 */
// 屏幕宽度
const windowWidth = ref(uni.getWindowInfo().screenWidth)
// 表单
const formRef = ref<UniFormRef | null>(null)
// 表单数据
const registerForm = reactive({
    username: "",
    password: "",
    confirmPassword: "",
    code: "",
    roleCode: store.loginRole
})
// 校验规则
const rules = reactive({
    'username': [{
        type: 'string',
        required: true,
        message: '账号不能为空',
        trigger: ['blur', 'change']
    },
    {
        pattern: /(^1[3-9][0-9]{9}$)/g,
        message: '手机格式错误',
        trigger: ['blur', 'change']
    }
    ],
    'password': {
        type: 'string',
        required: true,
        message: '密码不能为空',
        trigger: ['blur', 'change']
    },
    'confirmPassword': {
        type: 'string',
        required: true,
        message: '重复密码不能为空',
        trigger: ['blur', 'change']
    },
    'code': {
        type: 'string',
        required: true,
        message: '验证码不能为空',
        trigger: ['blur', 'change']
    }
})
// 获取验证码按钮
const uCode = ref<any>(null)
// 按钮文字
const tips = ref('')
// 提示
const uToastRef = ref<any>(null)
//同意协议
const isAgree = ref(false)


/* 函数 */
const codeChange = (text: string) => {
    tips.value = text
}
// 获取验证码
const getCode = async () => {
    if (!registerForm.username || !(/(^1[3-9][0-9]{9}$)/g).test(registerForm.username)) {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "账号必须为11位电话号码"
        })
        return
    }
    if (uCode.value.canGetCode) {
        uToastRef.value.show({
            type: 'loading',
            message: "正在获取验证码",
            duration: -1
        })
        let codeRes = await getCodeStr({
            phone: encrypt(registerForm.username) as string
        })
        uToastRef.value.hide()
        if (codeRes.success) {
            uToastRef.value.show({
                position: "top",
                type: 'success',
                message: "验证码已发送"
            })
        }
        // 通知验证码组件内部开始倒计时
        uCode.value.start()
    } else {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "倒计时结束后再发送"
        })
    }
}
// 注册
const handleRegister = async () => {
    if (!isAgree.value) {
        uToastRef.value.show({
            position: "top",
            type: 'error',
            message: "请阅读并勾选协议"
        })
        return
    }
    let valid = await formRef.value?.validate()
    if (valid) {
        if (registerForm.password !== registerForm.confirmPassword) {
            uToastRef.value.show({
                position: "top",
                type: 'error',
                message: "两个密码不一致"
            })
            return
        }
        uToastRef.value.show({
            type: 'loading',
            message: "验证中，请稍候",
            duration: -1
        })
        let res = await verificationCodeStr({
            phone: encrypt(registerForm.username) as string,
            code: encrypt(registerForm.code) as string
        })
        uToastRef.value.hide()
        if (res.success) {
            uToastRef.value.show({
                type: 'loading',
                message: "注册中，请稍候",
                duration: -1
            })
            let registerRes = await register({
                username: encrypt(registerForm.username) as string,
                password: encrypt(registerForm.password) as string,
                confirmPassword: encrypt(registerForm.confirmPassword) as string,
                code: registerForm.code,
                roleCode: registerForm.roleCode
            })
            uToastRef.value.hide()
            if (registerRes.success) {
                uToastRef.value.show({
                    position: "top",
                    type: 'success',
                    message: "注册成功",
                    complete() {
                        uni.reLaunch({
                            url: "/pages/login"
                        })
                    }
                })
            }
        }
    }
}
// 隐私协议
const privacyAgreement = () => {
    if (!isAgree.value) isAgree.value = true
    uni.navigateTo({
        url: '/pages/common/webview/index'
    })
}
// 服务协议
const serviceAgreement = () => {
    if (!isAgree.value) isAgree.value = true
    uni.navigateTo({
        url: '/pages/common/webview/pinganjiesuantong'
    })
}
// 账号密码登录
const goLogin = () => {
    uni.reLaunch({
        url: '/pages/login'
    })
}
</script>

<style lang="scss" scoped>
.myCode ::v-deep .u-code-input__item {
    border-bottom: 1px solid #3c9cff;
}

page {
    background-color: #ffffff;
}

.normal-login-container {
    width: 100%;

    .logo-content {
        width: 100%;
        font-size: 21px;
        text-align: center;
        padding-top: 15%;


        .title {
            margin-left: 10px;
        }
    }

    .login-form-content {
        text-align: center;
        margin: 20px auto;
        margin-top: 15%;
        width: 80%;

        .input-item {
            margin: 20px auto;
            background-color: #f5f6f7;
            height: 45px;
            border-radius: 20px;

            .icon {
                font-size: 38rpx;
                margin-left: 10px;
                color: #999;
            }

            .input {
                width: 100%;
                font-size: 14px;
                line-height: 20px;
                text-align: left;
                padding-left: 15px;
            }

        }

        .register-btn {
            margin-top: 20px;
            height: 45px;
        }

        .xieyi {
            color: #333;
            margin-top: 20px;
        }

        .login-code {
            height: 38px;
            float: right;

            .login-code-img {
                height: 38px;
                position: absolute;
                margin-left: 10px;
                width: 200rpx;
            }
        }
    }
}
</style>